<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定之计算器</title>
    <script src="./vue-2.4.0.js"></script>
</head>

<body>
<div id='app'>
    <input type="text" v-model="first">
    <select v-model="operator">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model="second">
    <button @click="add">=</button>
    <input type="text" v-model="end">
</div>
</body>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            first: '',
            operator: '',
            second: '',
            end: '',
        },
        methods: {
            add() {
                if (this.first && this.second && this.operator) {
                    let result;
                    switch (this.operator) {
                        case '+':
                            result = +this.first + +this.second;
                            break;
                        case '-':
                            result = +this.first - +this.second;
                            break;
                        case '*':
                            result = +this.first * +this.second;
                            break;
                        case '/':
                            if (this.second !== '0') {
                                result = +this.first / +this.second;
                            } else {
                                alert('除数不能为0');
                                return;
                            }
                            break;
                        default:
                            alert('无效的运算符');
                            return;
                    }
                    this.end = result;
                } else {
                    alert('请输入数值和运算符');
                }
            },
            getValue() {
                console.log(this.userName);
                console.log(this.passWord);
            }
        }
    })
</script>

</html>